<script setup>
import { reactive, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElText, ElLink, ElDialog } from 'element-plus';
import axios from "axios";

const formRef = ref(null)
const form = reactive({
  phone: '',
  code:'',
  newPassword: '',
  checkPass: '',
});

async function submitForm() {
  if (formRef.value) {
    try {
      await formRef.value.validate(); // 验证表单

      // 获取账户和密码
      const phone = encodeURIComponent(form.phone); // 编码URL字符
      const code = encodeURIComponent(form.code); // 编码URL字符
      const newPassword = encodeURIComponent(form.newPassword);
      const checkPass = encodeURIComponent(form.checkPass);

      // 发送POST请求
      await axios.put(`http://localhost:918/manager/changePassword?phone=${phone}&code=${code}&password=${newPassword}&password1=${checkPass}`,
      //     {
      //   // 将账户和密码放在请求体中
      //   phone: form.phone,
      //   code: form.code,
      //   newPassword: form.newPassword,
      //   checkPass: form.checkPass,
      // }
      )
          .then(response => {
            if (response.status === 200) { // 检查HTTP状态码
              if (response.data.msg === "success") {
                window.location.href = '/index1';
                alert('密码修改成功!');
              }
              else {
                alert('账号或密码错误!');
              }
            }
          })
          .catch(error => {
            console.error('密码修改失败:', error);
            alert('登录失败，请稍后再试!');
          });
    } catch (error) {
      // 处理validate或其他异步操作中的错误
      console.error('表单验证失败:', error);
    }
  }
}

const centerDialogVisible = ref(false);
const registerFailedVisible = ref(false);

function validatePassword(rule, value, callback) {
  if (!value) {
    return callback(new Error('请输入密码'));
  }

  // 正则表达式检查是否包含大写字母、小写字母和数字
  const hasUpperCase = /[A-Z]/.test(value);
  const hasLowerCase = /[a-z]/.test(value);
  const hasNumber = /\d/.test(value);

  // 至少需要两种类型
  const typesCount = (hasUpperCase ? 1 : 0) + (hasLowerCase ? 1 : 0) + (hasNumber ? 1 : 0);

  if (typesCount < 2) {
    callback(new Error('密码至少包含大写字母、小写字母和数字中的两种'));
  } else {
    callback();
  }
}

const rules = {

  phone: [
    {required: true, message: '请输入电话', trigger: 'blur'}
    //加一个与原来密码进行对比
  ],
  newPassword: [
    {validator: validatePassword, trigger: 'blur'},
    {min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur'},
  ],
  checkPass: [
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== form.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
};

// 发送验证码
async function sendCode() {
  if (formRef.value) { // 假设formRef.value是一个响应式引用，用于访问表单数据
    try {

      // 发送POST请求（注意：通常使用POST而不是PUT来请求验证码）
       await axios.post(`http://localhost:918/manager/sendCode?phone=${form.phone}`,
           {phone : form.phone}
       );
      } catch (error) {
      console.log(error);
    }
  };


}
</script>

<template>
  <div class="background-image-container">
    <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
      <el-form
          class="form-with-border"
          :model="form"
          :rules="rules"
          ref="formRef"
          status-icon
          label-width="auto"
          style="max-width: 400px"
      >
        <div style="display: flex; justify-content: center; align-items: center;margin-bottom: 10px">
          <el-text class="text">行远.找回密码</el-text>
        </div>
        <el-form-item prop="phone">
          <el-input
              v-model="form.phone"
              placeholder="电话"
              autocomplete="phone"
              style="height: 33px"
              clearable
          />
        </el-form-item>
        <el-form-item prop="code">
          <el-input
              v-model="form.code"
              placeholder="验证码"
              autocomplete="off"
              style="height: 33px;width: 200px"
          />
          <el-button type="primary" style="margin-left: 40px;" @click="sendCode">发送验证码</el-button>
        </el-form-item>

        <el-form-item prop="newPassword">
          <el-input
              v-model="form.newPassword"
              type="password"
              placeholder="新密码"
              autocomplete="new-password"
              style="height: 33px"
              show-password
          />
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
              v-model="form.checkPass"
              type="password"
              placeholder="再次确认密码"
              autocomplete="check-password"
              style="height: 33px"
              show-password
          />
        </el-form-item>
        <el-form-item>
          <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
            <el-button type="primary"
                       style="width: 350px;height: 40px;font-size: 25px;border-radius: 14px;"
                       plain @click="submitForm"
            >
              修改
            </el-button>
          </div>
        </el-form-item>
        <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
          <el-text style="font-size: 22px">已经有帐号了？</el-text>
          <el-link :underline="true" style="font-size: 22px" type="danger" @click="$router.push('/')" target="_self">
            登录
          </el-link>
        </div>
        <div>
          <el-dialog v-model="centerDialogVisible" title="提示" width="500" center>
    <span style="font-size: 25px;">
      修改密码成功！
    </span>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" style="width: 100px;height: 40px;font-size: 25px" @click="$router.push('/')"
                           target="_self">
                  去登录
                </el-button>
              </div>
            </template>
          </el-dialog>
          <el-dialog
              v-model="registerFailedVisible"
              title="错误"
              width="500">
            <span>表单验证失败，请检查您的输入！</span>
            <span>
      <el-button @click="registerFailedVisible = false">关 闭</el-button>
    </span>
          </el-dialog>
        </div>
      </el-form>
    </div>
  </div>

</template>


<style scoped>
.el-link {
  margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}

.background-image-container {
  background-image: url('@/assets/change.png');
  background-size: cover; /* 或者使用其他值，如contain、100% 100%等 */
  background-position: center;
}

.form-with-border {
  /* 设置边框的样式 */
  border: 2px solid #333333; /* 边框宽度为2px，样式为实线，颜色为黑色 */
  /* 为了让边框看起来更完整，通常还需要设置一些内边距和外边距 */
  padding: 20px; /* 内边距 */
  margin: 20px; /* 外边距 */
  /* 为了让边框看起来更美观，你可以添加一些圆角 */
  border-radius: 14px; /* 边框圆角 */
  /* 还可以添加阴影效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  height: 410px;
  width: 600px;
}

.text {
  font-size: 50px; /* 使用像素 */
  font-weight: bold;
}

* {
  box-sizing: border-box;
  /*改变所有元素的盒模型（box model）的计算方式。
  在CSS中，盒模型是描述元素如何布局在页面上的一种方式。
  传统上，CSS的盒模型由四个部分组成：内容（content）、
  内边距（padding）、边框（border）和外边距（margin）。
  默认情况下，元素的宽度和高度只包括内容（content）部分，
  内边距（padding）和边框（border）会额外增加元素的最终尺寸。*/
}


body {
  color: #333;
  font-size: 14px;
  margin: 0;
  padding: 0;
  /*定义了一个元素的字体大小、
  外边距（margin）和内边距（padding）的样式。*/
}
</style>